@import '~@/scss/GlobalVariables';

.wrap {
  background-color: $background-color-1;
  padding: 0;

  .nav-tab-user-input-box {
    margin: 0 auto;
    max-width: 550px;

    .progress-bar {
      animation-name: progressGrow;
      width: 66.66%;
    }

    @keyframes progressGrow {
      from {width: 33.33%;}
      to {width: 66.66%;}
    }

    .tab-pane {
      min-height: 500px;
      padding: 50px;

      h3 {
        margin-bottom: 40px;
        text-align: center;
      }

      .contents {
        margin-bottom: 120px;

        .tools {
          align-items: center;
          display: flex;
          margin-bottom: 10px;

          .value-switch {
            align-items: center;
            display: flex;

            .switch-label {
              color: $text-color-4;
              font-size: 14px;
              margin-left: 10px;
            }
          }

          .random-button {
            cursor: pointer;
            font-size: 14px;
            margin-left: auto;

            i {
              margin-right: 5px;
            }
          }
        }

        .phrases {
          ul {
            display: grid;
            grid-column-gap: 20px;
            grid-row-gap: 20px;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            margin-bottom: 20px;

            li {
              border-bottom: 1px solid $border-bottom--mnemonic-phrase-key-color;
              color: $text--mnemonic-phrase-index-color;
              font-size: 14px;
              padding: 10px 0;

              span {
                color: $text--mnemonic-phrase-key-color;
                margin-left: 10px;
              }
            }
          }
        }

      }

      .user-input {
        margin-bottom: 25px;

        input {
          background-color: $background-color-1;
          border: 0;
          font-size: 14px;
          margin-bottom: 40px;
          padding: 20px;
          width: 100%;
        }

        .next-button {
          display: block;
          margin: 0 auto;
          max-width: 300px;
          padding: 20px 0;
          text-align: center;

          img {
            margin-left: 5px;
            width: 20px;
          }
        }
      }

      .footer-text {
        display: flex;

        p {
          font-size: 13px;
          margin: 0 auto;

          .tooltip-icon {
            margin-left: 5px;
          }

          .icon {
            height: 25px;
            margin-right: 5px;
          }
        }
      }
    }
  }
}
